<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>个人所得税计算器</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/js/lib/layui/css/layui.css}" id="layuicss"/>
    <link rel="stylesheet" th:href="@{/css/basic.css}"/>
    <link rel="stylesheet" th:href="@{/css/basic_pre.css}"/>
    <script th:src="@{/js/lib/jquery.1.8.js}"></script>
    <script th:src="@{/js/lib/vue.min.js}"></script>
    <script th:src="@{/js/lib/layui/layui.js}"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">九九网智</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">
                <img th:src="@{/image/logo.png}" alt="" class="logo_img"/>
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li th:unless="${session.user == null}" th:object="${session.user}">
                    <a href="#" th:text="*{userName}"></a>
                </li>
                <li><a th:href="@{/toLoginOut}">退出</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid" id="app">
    <div class="row">
        <div class="col-sm-3 col-md-2">
            <div class="sidebar" style="width:60px; background:#2E2D3C; color: #fff;">
                <ul class="nav-sidebar">
                    <li><a><span class="glyphicon glyphicon-yen" data-th-alt-title="税率计算器"></span></a></li>
                    <li><a><span class="glyphicon glyphicon-calendar" title="常用计算器"></span></a></li>
                </ul>
            </div>
            <div class="sidebar" style="width:220px;margin-left:60px;">
                <ul class="nav-sidebar">
                    <li><a>个人所得税</a></li>
                    <li><a>车船税</a></li>
                    <li><a>私房出租税收</a></li>
                    <li><a>社保费</a></li>
                    <li><a>滞纳金计算</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-5 col-md-5">
            <div class="center-block">
                <div class="panel-body"></div>
                <div class="sub-header">
                    <h2 class="text-center" v-text="PageObj.title">个人所得税计算器</h2>
                </div>
                <div class="panel-body"></div>
                <div class="table-responsive" style="padding:20px 50px 20px;" id="input-div1">
                    <form id="input-form1">
                        <div class="form-group input-group">
                            <label class="input-group-addon">收入类型</label>
                            <select class="form-control" name="item" v-model="items.item.value">
                                <option value="1">工资、薪金所得（月薪）</option>
                                <option value="2">工资、薪金所得（月薪、税后）</option>
                                <option value="3">年终奖金</option>
                                <option value="4">劳务报酬所得</option>
                                <option value="5">个体工商户生产经营所得(查账征收)</option>
                                <option value="6">对企事业单位承包承租经营所得</option>
                                <option value="7">稿酬所得</option>
                                <option value="8">特许权使用费所得</option>
                                <option value="9">财产租赁所得（每月）</option>
                                <option value="A">财产转让所得（每次）</option>
                                <option value="B">利息股息红利所得（每次）</option>
                                <option value="C">偶然所得</option>
                            </select>
                        </div>
                        <div class="form-group input-group">
                            <label class="input-group-addon"
                                   v-text="items.item.value==='1'?'税前工资':(items.item.value==='2'?'税后工资':(items.item.value==='3'?'年终奖金':'收入金额'))"></label>
                            <input type="text" class="form-control" name="income" v-model="items.income.value"/>
                            <span class="input-group-addon">元</span>
                        </div>
                        <div class="form-group input-group" v-if="'12'.indexOf(items.item.value) >= 0">
                            <label class="input-group-addon">社会保险</label>
                            <input type="text" class="form-control" name="insurance" v-model="items.insurance.value"/>
                            <span class="input-group-addon">元</span>
                        </div>
                        <div class="form-group input-group" v-if="'A'.indexOf(items.item.value) >= 0">
                            <label class="input-group-addon">相关费用</label>
                            <input type="text" class="form-control" name="cost" v-model="items.cost.value"/>
                            <span class="input-group-addon">元</span>
                        </div>
                        <div class="form-group input-group" v-if="'12'.indexOf(items.item.value) >= 0">
                            <label class="input-group-addon">纳税人国籍</label>
                            <select name="country" id="country" class="form-control" v-model="items.country.value">
                                <option value="3500">中国</option>
                                <option value="4800">港澳台</option>
                                <option value="4800">外国</option>
                            </select>
                        </div>
                        <div class="form-group input-group" v-if="items.item.value==='6'">
                            <label class="input-group-addon">经营时间</label>
                            <select name="period" id="period" class="form-control" v-model="items.period.value">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                            <span class="input-group-addon">月</span>
                        </div>
                        <div class="panel-body"></div>
                        <span class="glyphicon glyphicon-bitcoin">计算结果</span>
                        <div class="panel-body"></div>
                        <div class="form-group input-group">
                            <label class="input-group-addon" v-text="items.item.value==='3'?'平均每月':'应纳税所得额'">应纳税所得额</label>
                            <span class="form-control" v-text="taxAmount"></span>
                            <span class="input-group-addon">元</span>
                        </div>
                        <div class="form-group input-group">
                            <label class="input-group-addon">适用税率</label>
                            <span class="form-control text-right" v-text="this.round2(taxRate*100)"></span>
                            <span class="input-group-addon">%</span>
                        </div>
                        <div class="form-group input-group">
                            <label class="input-group-addon">速算扣除</label>
                            <span class="form-control" v-text="taxDeduct"></span>
                            <span class="input-group-addon">元</span>
                        </div>
                        <div class="form-group input-group">
                            <label class="input-group-addon">应缴税款</label>
                            <span class="form-control" v-text="taxValue"></span>
                            <span class="input-group-addon">元</span>
                        </div>
                        <div class="form-group input-group">
                            <label class="input-group-addon" v-text="items.item.value==='2'?'税前收入':'税后收入'">税后收入</label>
                            <span class="form-control" v-text="realIncome"></span>
                            <span class="input-group-addon">元</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-5">
            <div class="panel-body"></div>
            <div class="center-block" v-if="'12'.indexOf(items.item.value)>=0">
                <div style="border:1px solid #8c8c8c; padding:20px; width:100%;">
                    ## 个人所得税计算公式
                    <hr/>
                    <b>应纳税所得额 = 工资收入金额 - 各项社会保险费 - 起征点(3500元)</b><br/>
                    <b>应纳税额 = 应纳税所得额 * 税率 - 速算扣除数</b><br/>
                    <span>注：如果计算的外籍人士(包括港、澳、台)，则个税起征点为4800元。</span>
                </div>
                <div class="panel-body"></div>
                <div style="border:1px solid #8c8c8c; padding:20px; width:100%;">
                    ## 个人所得税税率表
                    <table class="table table-striped">
                        <tr><td>级数</td><td>应纳税所得额(含税)</td><td>应纳税所得额(不含税)</td><td>税率(%)</td><td>速算扣除数</td></tr>
                        <tr><td>1</td><td>不超过1500元</td><td>不超过1455元</td><td>3</td><td>0</td></tr>
                        <tr><td>2</td><td>超过1500元到4500元</td><td>超过1455元到4155元</td><td>10</td><td>105</td></tr>
                        <tr><td>3</td><td>超过4500元到9000元</td><td>超过4155元到7755元</td><td>20</td><td>555</td></tr>
                        <tr><td>4</td><td>超过9000元到35000元</td><td>超过7755元到27255元</td><td>25</td><td>1005</td></tr>
                        <tr><td>5</td><td>超过35000元到55000元</td><td>超过27255元到41255元</td><td>30</td><td>2755</td></tr>
                        <tr><td>6</td><td>超过55000元到80000元</td><td>超过41255元到57505元</td><td>35</td><td>5505</td></tr>
                        <tr><td>7</td><td>超过80000元</td><td>超过57505元</td><td>45</td><td>13505</td></tr>
                    </table>
                    <p>
                        说明：<br/>
                        1. 上表含税级距中应纳税所得额，是指每月收入金额 - 各项社会保险金(五险一金) - 起征点3500元(外籍4800元)的余额。<br/>
                        2. 含税级距适用于由纳税人负担税款的工资、薪金所得；不含税级距适用于由他人(单位)代付税款的工资、薪金所得。
                    </p>
                </div>
            </div>
            <div class="center-block" v-if="'3'.indexOf(items.item.value)>=0">
                <div style="border:1px solid #8c8c8c; padding:20px; width:100%;">
                    ## 年终奖个人所得税计算公式
                    <hr/>
                    <b>应纳税所得额 = 年终奖金</b><br/>
                    <b>应纳税额 = 应纳税所得额 * 税率 - 速算扣除数</b><br/>
                </div>
                <div class="panel-body"></div>
                <div style="border:1px solid #8c8c8c; padding:20px; width:100%;">
                    ## 年终奖个人所得税税率表
                    <table class="table table-striped">
                        <tr><td>级数</td><td>平均每月收入</td><td>税率(%)</td><td>速算扣除数</td></tr>
                        <tr><td>1</td><td>不超过1500元</td><td>3</td><td>0</td></tr>
                        <tr><td>2</td><td>超过1500元到4500元</td><td>10</td><td>105</td></tr>
                        <tr><td>3</td><td>超过4500元到9000元</td><td>20</td><td>555</td></tr>
                        <tr><td>4</td><td>超过9000元到35000元</td><td>25</td><td>1005</td></tr>
                        <tr><td>5</td><td>超过35000元到55000元</td><td>30</td><td>2755</td></tr>
                        <tr><td>6</td><td>超过55000元到80000元</td><td>35</td><td>5505</td></tr>
                        <tr><td>7</td><td>超过80000元</td><td>45</td><td>13505</td></tr>
                    </table>
                    <p>
                        说明：<br/>
                        1. 将年终奖金除以12个月得到每个月的平均收入，然后根据月平均收入从上表中获得对应的税率和扣除数。<br/>
                        2. 当纳税人在发放年终奖当月的工资低于税法规定的费用扣除额时，其应纳税所得额为年终奖减除费用差额后的余额。详见如下案例：<br/>
                        ** 某人2017年1月份工资为3600元，年终奖36000元，当月社保费用400元，则其所得税计算如下：<br/>
                        薪资应纳税所得额 = 3600 - 400 - 3500 = -300 &lt; 0 <br/>
                        年终奖应纳税所得额 = 36000 - 300 = 33000 元 <br/>
                        平均月收入 = 33000 / 12 = 2750元, 适用税率10%,扣除数105 <br/>
                        应纳税额 = 33000 * 10% - 105 = 3195元 <br/>
                        <span color="red">本计算器未提供上述2所描述情形下的应纳税额计算。</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    var PageObj = {
        contextPath: document.location.href.match(/(http:\/\/[a-zA-Z0-9\.:]+\/[a-zA-Z0-9]+\/)/g)[0],
        title: "个人所得税计算器",
        items: {
            "item": {
                "title": "收入类型",
                "options": {
                    "1": "工资薪金所得(月薪)",
                    "2": "工资薪金所得(月薪、税后)",
                    "3": "年终奖金"
                },
                "value": "1"
            },
            "income": {
                "title": "税前工资",
                "value": 0
            },
            "insurance": {
                "title": "社会保险",
                "value": 0
            },
            "cost": {
                "title": "相关费用",
                "value": 0
            },
            "country": {
                "title": "纳税人国籍",
                "value": 3500
            },
            "period": {
                "title": "经营时间",
                "value": 12
            }
        }
    };
    console.log(PageObj.contextPath);

    var vm = new Vue({
        el: "#app",
        data: function () {
            return PageObj;
        },
        methods: {
            amount: function () {
                var result;
                if (this.items.item.value === "1") {
                    // 税前月薪
                    result = this.items.income.value - this.items.insurance.value - this.items.country.value;
                } else if (this.items.item.value === "2") {
                    // 税后月薪
                    var temp = this.items.income.value - this.items.country.value;
                    switch (true) {
                        case temp > 57500:
                            result = (temp - 13505) / (1 - 0.45);
                            break;
                        case temp > 41255:
                            result = (temp - 5505) / (1 - 0.35);
                            break;
                        case temp > 27255:
                            result = (temp - 2775) / (1 - 0.30);
                            break;
                        case temp > 7755:
                            result = (temp - 1005) / (1 - 0.25);
                            break;
                        case temp > 4155:
                            result = (temp - 555) / (1 - 0.20);
                            break;
                        case temp > 1455:
                            result = (temp - 105) / (1 - 0.10);
                            break;
                        default:
                            result = temp / (1 - 0.03);
                    }
                } else if (this.items.item.value === '3') {
                    // 年终奖金
                    result = this.items.income.value / 12;
                } else if ("4789".indexOf(this.items.item.value) >= 0) {
                    // 劳务报酬所得、稿酬所得
                    var temp = Number(this.items.income.value);
                    result = temp <= 4000 ? temp - 800 : temp * (1 - 0.2);
                } else if ('5BC'.indexOf(this.items.item.value) >= 0) {
                    // 个体工商生产、经营所得，适用于查账征收的个体工商，不适用于核定征收的
                    // 利息股息红利所得
                    // 偶然所得
                    result = Number(this.items.income.value);
                } else if (this.items.item.value === '6') {
                    result = Number(this.items.income.value) - (this.items.period.value * 3500);
                } else if (this.items.item.value === 'A') {
                    // 财产转让所得
                    result = Number(this.items.income.value) - Number(this.items.cost.value);
                }
                return result >= 0 ? this.round2(result) : 0;
            },
            rate: function () {
                var amount = this.amount();
                var item = this.items.item.value;
                var result;
                if ("123".indexOf(item) >= 0) {
                    // 月薪，含税前和税后； 年终奖金
                    result = amount > 80000 ? 0.45 : (amount > 55000 ? 0.35 : (amount > 35000 ? 0.3 : (amount > 9000 ? 0.25 : (amount > 4500 ? 0.2 : (amount > 1500 ? 0.1 : (amount > 0 ? 0.03 : 0))))));
                } else if ("4".indexOf(item) >= 0) {
                    // 劳务报酬税前所得
                    result = amount > 50000 ? 0.4 : (amount > 20000 ? 0.3 : (amount > 0 ? 0.2 : 0));
                } else if ("56".indexOf(item) >= 0) {
                    // 个体工商、对企事业单位承包承租经营所得
                    result = amount > 100000 ? 0.35 : (amount > 60000 ? 0.3 : (amount > 30000 ? 0.2 : (amount > 15000 ? 0.1 : (amount > 0 ? 0.05 : 0))));
                } else if ("7".indexOf(item) >= 0) {
                    // 稿酬所得
                    result = 0.14;
                } else if ("89ABC".indexOf(item) >= 0) {
                    // 特许权使用费 // 财产租赁 // 财产转让 //利息股息红利 // 偶然所得
                    result = 0.2;
                }
                return result;
            },
            deduct: function () {
                var amount = this.amount();
                var item   = this.items.item.value;
                var result;
                if ("123".indexOf(item) >= 0) {
                    result = amount > 80000 ? 13505 : (amount > 55000 ? 5505 : (amount > 35000 ? 2755 : (amount > 9000 ? 1005 : (amount > 4500 ? 555 : (amount > 1500 ? 105 : 0)))));
                } else if ("4".indexOf(item) >= 0) {
                    // 劳务报酬税前所得
                    result = amount > 50000 ? 7000 : (amount > 20000 ? 2000 : 0);
                } else if ("56".indexOf(item) >= 0) {
                    // 查账征收的个体工商、对企事业单位承包承租经营所得
                    result = amount > 100000 ? 14750 : (amount > 60000 ? 9750 : (amount > 30000 ? 3750 : (amount > 15000 ? 750 : 0)));
                } else {
                    result = 0;
                }
                return result;
            },
            tax: function () {
                var item = this.items.item.value;
                var amount = item === "3" ? Number(this.items.income.value) : this.amount();
                var result = this.round2(amount * this.rate() - this.deduct());
                return result;
            },
            round2: function (num) {
                return Math.round((num - 0) * 100) / 100;
            }
        },
        computed: {
            taxAmount: function () {
                return this.amount();
            },
            taxRate: function () {
                return this.rate();
            },
            taxDeduct: function () {
                return this.deduct();
            },
            taxValue: function () {
                return this.tax();
            },
            realIncome: function () {
                if (this.items.item.value === "2") {
                    return this.tax() + Number(this.items.income.value) + Number(this.items.insurance.value);
                } else {
                    return this.items.income.value - this.tax();
                }
            }
        }
    });
    /*]]>*/
</script>

</body>
</html>